<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body{
            font: 18px "Microsoft YaHei UI";
            margin: 0;
            background-color: #f1f1f1;
        }
        header a{
            text-decoration: none;
            color: #FFFFFF;
        }
        header a:hover{
            color: #0aa1ed;
        }
        /*去掉自带的内边距*/
        .el-table .el-table__cell{
            padding: 0;
            color: #FF6537;
            font: 20px "Microsoft YaHei UI";
        }
        .p_img:hover{
            position: relative;
            bottom: 5px;
            /*元素的阴影:x偏移值 y偏移值 浓度 范围 颜色*/
            box-shadow: 0 0 10px 5px #333;
        }
        div li a{
            color: #FFFFFF;
            font: 16px "Microsoft YaHei UI";
        }
        div li a:hover{
            color: #0aa1ed;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="padding: 0;height: 40px;background-color:#FF6537">
            <div style="width: 1200px;margin: 0 auto">
                <el-row>
                    <el-col :span="18" style="padding-top: 10px">
                        <i class="el-icon-s-home" style="color: #FFFFFF"></i>
                        <a href="index.html">商城首页</a>
                        <a href="">宠物攻略</a>
                        <a href="">宠物交流中心</a>
                    </el-col>
                    <el-col :span="6" style="padding-top: 10px">
                        <a href="login.html">登录</a>
                        <a href="login.html">注册</a>
                        <i class="el-icon-shopping-cart-1" style="color: #FFFFFF"></i>
                        <a href="shoppingTrolley.html">购物车</a>
                        <i class="el-icon-user" style="color: #FFFFFF"></i>
                        <a href="userRegister.html">个人中心</a>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <div style="display: flex;justify-content: center; background-color: #FFFFFF;">
            <div style="float: left">
                <img src="imgs/logo1.jpg"
                     style="width: 150px;vertical-align: middle" alt="">
                <!--搜索框开始-->
                <el-input style="width: 580px;border: 1px solid #FF6537;" v-model="input" placeholder="请输入内容"></el-input>
                <el-button type="搜索" round style="background-color: #FF6537;color: #FFFFFF">搜索</el-button>
                <!--搜索框结束-->
            </div>
        </div>

        <el-main style="width: 1600px;margin: 0 auto;padding: 0px">

            <!--蓝色导航条开始-->
            <div style="width:100%;height:60px;background-color: #82c8ec;margin: 0 auto">
                <el-menu style="width: 1600px;margin: 0 auto"
                         default-active="1"
                         class="el-menu-demo"
                         mode="horizontal"
                         @select="handleSelect"
                         background-color="#FF6537"
                         text-color="#000000"
                         active-text-color="#fff">
                    <el-menu-item index="1"><a href="index.html">返回首页</a></el-menu-item>
                    <el-menu-item index="2"><a href="personalDetails.html">个人信息</a></el-menu-item>
                    <el-menu-item index="3"><a href="changePassword.html">账号设置</a></el-menu-item>
                </el-menu>
            </div>
            <!--蓝色导航条结束-->
            <el-row gutter="">
                <el-col span="6">
                    <!--导航菜单开始-->
                    <el-card class="box-card" style="height: 400px;width: 380px;background-color:  #FFFFFF;color: #FF6537">
                        <div style="text-align: center;margin: 40px 0px 40px 0px">
                        <el-upload
                                action="/upload"
                                name="picFile"
                                :limit="1"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-success="handleSuccess"
                                :on-remove="handleRemove">
                            </el-upload>
                        </div>
                        <div style="text-align: center;height: 100px;margin-bottom: auto">
                        <a href="" style="margin: 0px 30px 50px -30px">登录</a>
                            <a href="" style="margin: 0px -30px 0px 30px">退出</a>
                        </div>
                    </el-card>
                    <!--导航菜单结束-->
                </el-col>
                <el-col span="18">
                    <!--排行榜开始-->
                    <el-card style="height: 400px">
                        <h3 style="color:#FF6537 "><i style="font-weight: bold"></i> 我的订单</h3>
                        <el-divider></el-divider>
                        <div>
                            <div style="float: left;margin: 0px 60px">
                                <a href="">
                                    <div class="el-icon-goods" style="font-size: 100px;color: #6c6c6c"></div>
                                    <div style="width: 100px;text-align: center"><a href="allOrders.html">全部订单</a></div>
                                </a>
                            </div>
                        <div style="float: left;margin: 0px 60px">
                        <a href="">
                            <div class="el-icon-wallet" style="font-size: 100px;color: #6c6c6c"></div>
                            <div style="width: 100px;text-align: center"><a href="nonPayment.html">待付款</a></div>
                        </a>
                        </div>
                        <div style="float: left;margin: 0px 60px">
                            <a href="">
                                <div class="el-icon-box" style="font-size: 100px;color: #6c6c6c"></div>
                                <div style="width: 100px;text-align: center"><a href="notReceiveTheGoods.html">待收货</a></div>
                            </a>
                        </div>
                        <div style="float: left;margin: 0px 60px">
                            <a href="">
                                <div class="el-icon-s-comment" style="font-size: 100px;color: #6c6c6c"></div>
                                <div style="width: 100px;text-align: center"><a href="EvaluationInDetail.html">待评价</a></div>
                            </a>
                        </div>
                        <div style="float: left;margin: 0px 60px">
                            <a href="">
                                <div class="el-icon-truck" style="font-size: 100px;color: #6c6c6c"></div>
                                <div style="width: 100px;text-align: center"><a href="afterSale.html">售后</a></div>
                            </a>
                        </div>
                        </div>
                    </el-card>
                    <!--排行榜结束-->
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                bannerArr:[{url:"imgs/1.jpg"},
                    {url:"imgs/2.jpg"},
                    {url:"imgs/3.jpg"},
                    {url:"imgs/4.jpg"},
                    {url:"imgs/5.jpg"},
                    {url:"imgs/6.jpg"},
                    {url:"imgs/7.jpg"},
                    {url:"imgs/8.jpg"},
                    {url:"imgs/9.jpg"},
                    {url:"imgs/10.jpg"}],
                topArr:[{title:"小米手机",saleCount:5000},
                    {title:"华为手表",saleCount:4000},
                    {title:"毛巾",saleCount:3000},
                    {title:"双飞燕鼠标",saleCount:2000},
                    {title:"耐克篮球",saleCount:1000},
                    {title:"阿迪袜子",saleCount:500},
                    {title:"阿迪袜子",saleCount:500},
                    {title:"阿迪袜子",saleCount:500},
                    {title:"阿迪袜子",saleCount:500},
                    {title:"阿迪袜子",saleCount:500}],
                productArr:[{title:"疯狂的小狗狗粮1-6月幼犬专用泰迪柯基金毛拉布拉多奶糕通用型20",price:233,oldPrice:598,url:"imgs/11.jpg",saleCount:2342},
                    {title:"麦富迪狗粮20斤装泰迪通用型比熊博美柯基法斗小型成幼犬粮1.3kg",price:233,oldPrice:598,url:"imgs/12.jpg",saleCount:2342},
                    {title:"凯锐思狗粮通用型大型犬金毛拉布拉多哈士奇阿拉斯加边牧40斤装",price:233,oldPrice:598,url:"imgs/13.jpg",saleCount:2342},
                    {title:"汪爸爸鲜肉无谷狗粮泰迪贵宾比熊柯基金毛幼成犬粮通用型4斤装",price:233,oldPrice:598,url:"imgs/14.jpg",saleCount:2342},
                    {title:"卫仕猫粮1.8kg十大品牌排行榜成猫幼猫热销榜全阶段卫士",price:233,oldPrice:598,url:"imgs/15.jpg",saleCount:2342},
                    {title:"凯锐思幼猫猫粮1-2-4-12个月奶糕鱼肉幼猫粮营养增肥发腮猫粮",price:233,oldPrice:598,url:"imgs/16.jpg",saleCount:2342},
                    {title:"麦富迪成猫粮10kg英短美短鱼油配方成猫美毛去毛球猫咪天然粮",price:233,oldPrice:598,url:"imgs/17.jpg",saleCount:2342},
                    {title:"麦富迪barf猫粮霸弗生骨肉冻干天然粮营养增肥发腮成猫通用1.8kg",price:233,oldPrice:598,url:"imgs/18.jpg",saleCount:2342},
                    {title:"宜特狗狗玩具耐咬发声比熊幼犬磨牙宠物消耗体力小狗自嗨解闷神器",price:233,oldPrice:598,url:"imgs/19.jpg",saleCount:2342},
                    {title:"狗狗玩具耐咬磨牙棒小狗咬胶骨头幼犬泰迪金毛边牧宠物大型犬玩具",price:233,oldPrice:598,url:"imgs/20.jpg",saleCount:2342},
                    {title:"L型猫抓板耐磨不掉屑立式猫爪板一体猫窝大号防猫抓瓦楞纸猫玩具",price:233,oldPrice:598,url:"imgs/21.jpg",saleCount:2342},
                    {title:"猫玩具自嗨解闷逗猫棒2021新款猫转盘猫猫自动逗猫器猫咪用品大全",price:233,oldPrice:598,url:"imgs/22.jpg",saleCount:2342}]
            }
        }
    })
</script>
</html>